<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台首页</title>
<link rel="stylesheet" href="js/layui-2.5.4/css/layui.css">
<script src="js/layui-2.5.4/layui.js"></script>
<script type="text/javascript" src="js/my_js/user.js"></script>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<div class="layui-header">
			<div class="layui-logo">layui 后台布局</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">基本资料</a>
						</dd>
						<dd>
							<a href="">安全设置</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="">退了</a></li>
			</ul>
		</div>


		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree">
					<li class="layui-nav-item"><a data-url="/user"
						data-id="carInformation" data-title="车辆信息"
						class="site-demo-active" href="javascript:;" data-type="tabAdd">车辆信息</a></li>
					<li class="layui-nav-item"><a data-url="/user"
						data-id="userInformation" data-title="用户信息"
						class="site-demo-active" href="javascript:;" data-type="tabAdd">用户信息</a>
					</li>
					<li class="layui-nav-item"><a data-url="/user"
						data-id="roleInformation" data-title="角色信息"
						class="site-demo-active" href="javascript:;" data-type="tabAdd">角色信息</a>
					</li>
					<li class="layui-nav-item"><a data-url="/user" data-id="3"
						data-title="新闻列表" class="site-demo-active" href="javascript:;"
						data-type="tabAdd">新闻列表</a></li>
					<li class="layui-nav-item"><a data-url="/user" data-id="3"
						data-title="新闻列表" class="site-demo-active" href="javascript:;"
						data-type="tabAdd">新闻列表</a></li>
				</ul>
			</div>

		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-tab layui-tab-card" lay-filter="demo"
				lay-allowclose="true">
				<ul class="layui-tab-title">
					<li class="layui-this" lay-id="carInformation">车辆信息</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<iframe id="iframeMain" class="iframeMain" src="/user"
							scrolling="no" frameborder="0" width="100%"></iframe>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;
			var $ = layui.jquery;

			//一下代码是根据窗口高度在设置iframe的高度
			var frame = $(".iframeMain");
			var frameheight = $(window).height();
			frame.css("height", frameheight);
			//触发事件
			var active = {
				//在这里给active绑定几项事件，后面可通过active调用这些事件
				tabAdd : function(url, id, name) {
					//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
					//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
					element.tabAdd('demo', {
						title : name,
						content : '<iframe class="iframeMain" data-frameid="'
								+ id + '" scrolling="no" frameborder="0" src="'
								+ url + '" style="width:100%;"></iframe>',
						id : id
					//规定好的id
					})
					element.render('tab');

				},
				tabChange : function(id) {
					//切换到指定Tab项
					element.tabChange('demo', id); //根据传入的id传入到指定的tab项
					//一下代码是根据窗口高度在设置iframe的高度
					var frame = $(".iframeMain");
					var frameheight = $(window).height();
					frame.css("height", frameheight);
				},
				tabDelete : function(id) {
					element.tabDelete("demo", id);//删除
				},
				tabDeleteAll : function(ids) {//删除所有
					$.each(ids, function(i, item) {
						element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
					})
				}
			};
			//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
			$('.site-demo-active').on(
					'click',
					function() {
						var dataid = $(this);

						//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
						if ($(".layui-tab-title li[lay-id]").length <= 0) {
							//如果比零小，则直接打开新的tab项
							active
									.tabAdd(dataid.attr("data-url"), dataid
											.attr("data-id"), dataid
											.attr("data-title"));
						} else {
							//否则判断该tab项是否以及存在

							var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
							$.each($(".layui-tab-title li[lay-id]"),
									function() {
										//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
										if ($(this).attr("lay-id") == dataid
												.attr("data-id")) {
											isData = true;
										}
									})
							if (isData == false) {
								//标志为false 新增一个tab项
								active.tabAdd(dataid.attr("data-url"), dataid
										.attr("data-id"), dataid
										.attr("data-title"));
							}
						}
						//最后不管是否新增tab，最后都转到要打开的选项页面上
						active.tabChange(dataid.attr("data-id"));
					});

		});
	</script>
	</div>
</body>
</html>